<template>
  <div class="module-home-box">
    <div class="module-home-container">
      <div class="mobil-title">
        <p>检验报告查询 </p>
      </div>
      <div class="mobil-center">
          <!-- <el-icon color="#fff"><ArrowLeft /></el-icon> -->
          <p  class="mobile-title-text">质量检验信息服务平台</p>
          <img src="@/assets/imgs/login/book.png" alt="" />
      </div>
    </div>

    <div class="mobile-data">
      {{nowTimeAndEndTime.startTime}} 至  {{ nowTimeAndEndTime.endTime }}    
      <!-- <el-icon color="#3670F6"><ArrowDownBold /></el-icon> -->
      <!-- <el-date-picker
      v-model="mobileData"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime1"
       style="width: 300px; height: 40px;"
    /> -->
    </div>

    <div class="mobile-bottom" v-for="(item,index) in pageList" :key="index">

<div class="mobile-bottom-btn" @click="exportPDF(item)">下载</div>

      <div class="mobile-bottom-item">
        <p class="item-title">样品编号：</p>
        <p class="item-content">{{ item.sampleNum }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">样品名称：</p>
        <p class="item-content">{{ item.sampleName }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">规格型号：</p>
        <p class="item-content">{{ item.model }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">批次号：</p>
        <p class="item-content">{{ item.sampleBatchNum }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">执行标准</p>
        <p class="item-content">{{ item.executiveStandard }}</p>
      </div>


      <div class="mobile-bottom-item">
        <p class="item-title">受检单位：</p>
        <p class="item-content">{{   item.receiveCheckCompany }}</p>
      </div>



    <div v-if="item.isShow">
      <div class="mobile-bottom-item">
        <p class="item-title">生产单位：</p>
        <p class="item-content">{{   item.productionCompany }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">抽样地点：</p>
        <p class="item-content">{{ item.samplingSite }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">抽样时间：</p>
        <p class="item-content">{{  item.samplingDate }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">检验时间：</p>
        <p class="item-content">{{   item.checkStartTime }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">承检机构：</p>
        <p class="item-content">{{  item.orgName }}</p>
      </div>

      <div class="mobile-bottom-item">
        <p class="item-title">检验状态：</p>
        <p class="item-content">{{  item.checkStateString }}</p>
      </div>

      <div class="mobile-table">
      <el-table :data="detailList.checkResultList" stripe >
    <el-table-column prop="checkProject" label="检测项目" align="center" />
    <el-table-column prop="unit" label="单位" align="center" />
    <el-table-column prop="designRequire" label="设计要求" align="center" />
    <el-table-column prop="checkResult" label="检查结果" align="center" />
    <el-table-column prop="singleDecision" label="单项判定" align="center" />
  </el-table>
    </div>
    </div>

    <div class="mobile-detail">
        <el-button type="primary" v-if="!item.isShow" round @click="clickDetail(item,index)"> 查看详情</el-button>
      </div>
    </div>
  </div>
  
      <ReportTemplate style="display: none;" ref="reportTemplateRef" :data="detailList" />
</template>

<script setup lang="ts">
import { OrganizationQualificationApi } from '@/api/qis/organizationqualification'
import { SampleInformationApi } from '@/api/qis/sampleinformation'
import { ArrowLeft, ArrowDownBold } from '@element-plus/icons-vue'
import { use } from 'echarts'
import ReportTemplate from './ReportTemplate.vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { ref } from 'vue'
const tableData = ref([])
const mobileData = ref([])
const detailStatus = ref(false)
const clickDetail = (item,index)=>{
  console.log(item.id,'item')

  pageList.value.forEach((v,index)=>{
    console.log(v.id,'v')
    v.show = false
      if(v.id == item.id){
          console.log('进来了')
          console.log(item.id,'item')
        v.isShow = true
      }else {
        v.isShow = false
      }
  })

console.log(pageList.value,'改变之后pageList')
const defaultTime1 = ref(['00:00:00', '23:59:59']);

console.log(item,'item')
  detailStatus.value = true
  getSampleInformationApi(item.id)
}
const route = useRoute()

const nowTimeAndEndTime = ref({
  startTime:'',
  endTime:''
})
const getTimeListApi = async()=>{
 const res =  await OrganizationQualificationApi.getTimeList()
//  console.log(res,'时间列表'
//  )

nowTimeAndEndTime.value.startTime = res.startTime
nowTimeAndEndTime.value.endTime = res.endTime
}


// 监听页面销毁
window.addEventListener('unload', function () {
            // 这里可以执行一些同步操作，例如清除本地存储
           
            console.log('页面已卸载');
        });

const detailList = ref({})
const getSampleInformationApi = async (id)=>{
 const res =  await SampleInformationApi.getSampleInformation(id)
//  console.log(res)
detailList.value = res
}

const message = useMessage()

const reportTemplateRef = ref(null)




const exportPDF = async (item) => {
  console.log(item,'item')
  console.log(item,'item')
  getSampleInformationApi(item.id)
  console.log('下载',item)

  console.log(reportTemplateRef.value)
  
setTimeout(async ()=>{
  try {
    detailList.value = item
    const element = reportTemplateRef.value.reportRef
  console.log(reportTemplateRef.value)
    
    console.log(element,'element')
    if (!element) return

  const canvas = await html2canvas(element, {
      scale: 2,
      useCORS: true,
      logging: false
    })

    const imgData = canvas.toDataURL('image/jpeg', 1.0)
    const pdf = new jsPDF('p', 'mm', 'a4')
    const pdfWidth = pdf.internal.pageSize.getWidth()
    const pdfHeight = (canvas.height * pdfWidth) / canvas.width

    pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight)
    pdf.save('检验报告.pdf')
    
    // message.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    // message.error('导出失败')
  }
},4000)
}

const pageList = ref([])

const getList =async ()=>{
 const res =  await SampleInformationApi.getSampleInformationPage({type:3,idList:[route.query.id]})
 console.log(res,'getList')
 const newList = res.list.map((item) => {
      return { ...item, isShow: false };
    });

 
 pageList.value = newList
}

onMounted(()=>{
  getList()
    

  getTimeListApi()

  

})
</script>

<style lang="scss" scoped>
.module-home-box {
  width: 100%;
  max-height: 90%;
  margin-bottom: 100px;
  overflow: auto;
  background: #eee;
}

.module-home-container {
  position: relative;
  height: 240px;
  background: blue;

  &::before {
    position: absolute;
    width: 100%;
    height: 240px;
    background-image: url('@/assets/imgs/login/mobileLogin.png');
    // background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    
  }

  .mobil-title {
    width: 100%;
    height: 110px;

    p {
      font-size: 22px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
  }

  .mobil-center {
    position: absolute;
    z-index: 999;
    display: flex;
    width: 90%;
    height: 100px;
    margin: 0 20px;
    background: linear-gradient(179deg, rgb(131 181 255 / 50%) 1%, rgb(217 232 255 / 35%) 41%, rgb(255 255 255 / 0%) 98%);
    border: 1px solid #fff;
    border-radius: 8px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;

    .mobile-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: start;
      margin-left: -10px;

      p {
        font-family: '思源黑体';
        font-size: 18px;
        font-weight: bold;
        line-height: 21px;
        letter-spacing: -0.25px;
      }
    }

    img {
      width: 49px;
      height: 42px;
    }
  }
}

.mobile-data {
  height: 28px;
  padding: 4px 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #3670f6;
  background: #fff;
  border-radius: 4px;
}

.mobile-bottom {
  position: relative;
  padding: 20px;
  margin-bottom: 10px;
  overflow: auto;
  background: #fff;
  border-radius: 12px;

  // &::before {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   width: 87px;
  //   height: 30px;
  //   font-family: "思源黑体";
  //   font-size: 12px;
  //   line-height: 30px;
  //   color: #3670F6;
  //   text-align: center;
  //   background-image: url('@/assets/imgs/login/downloadImg.png');
  //   content: '下载';
  // }

  .mobile-bottom-btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 87px;
    height: 30px;
    font-family: "思源黑体";
    font-size: 12px;
    line-height: 30px;
    color: #3670F6;
    text-align: center;
    background-image: url('@/assets/imgs/login/downloadImg.png');
    content: '下载';
  }

  .mobile-bottom-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .item-title {
      font-family: 'PingFang SC';
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0;

      /* 6/二级文字 */
      color: #8f97a7;
    }

    .item-content {
      font-family: 'PingFang SC';
      font-size: 14px;
      color: #141f34;
    }
  }
}

.mobile-detail{
  display: flex;
  justify-content: flex-end;
}

.mobile-table{
  padding: 16px 0;
  margin: 10px 0;
  border-radius: 12px;
}


.mobile-title-text{
  font-size: 18px;
  font-weight: 700;
  color: #222E58;
}
</style>
